<template>
	<view class="details uni-padding-wrap">
		<view class="form form-a">
			<view class="form-group">
				<view class="form-item">
					<text class="form-item-header">点位名称：</text>
					<text class="form-item-body"> {{ name }} </text>
				</view>
				<view class="form-item">
					<text class="form-item-header">位置：</text>
					<text class="form-item-body">{{ address }}</text>
				</view>
			</view>
		</view>
		<view class="step step-a" v-if="list.length > 0">
			<view class="step-group">
				<view 
					class="step-item"
					:class="{begin: index == 0,end: index === (list.length - 1)}"
					v-for="(item, index) in list" :key="index">
					<view class="step-item-line">
						<view class="step-item-check"></view>
					</view>
					<view class="panel">
						<view class="panel-angle"></view>
						<view class="panel-header">
							<view class="panel-item-bot">{{ item.createTime }}</view>
						</view>
						<view class="panel-body">
							<view class="panel-item">
								<text class="panel-item-header">积水情况：</text>
							</view>
							<view class="panel-item">
								<text class="panel-item-header">积水深度：</text>
								<text class="panel-item-body">{{ item.jsDepth }}厘米</text>
							</view>
							<view class="panel-item">
								<text class="panel-item-header">积水面积：</text>
								<text class="panel-item-body">{{ item.jsAreas }}厘米</text>
							</view>
							<view class="panel-item panel-item-ver">
								<view class="panel-item-header">现场情况：</view>
								<view class="panel-item-body">
									{{ item.remark }}
								</view>
							</view>
							<view class="panel-item panel-item-ver">
								<view class="panel-item-header">照片：<text v-if="item.small_imags.length == 0">无</text></view>
								<view class="panel-item-body" v-if="item.small_imags.length > 0">
									<view class="pic-box" @tap="viewPic(item.big_imags)">
										<image class="pic" mode="aspectFit" :src="item.small_imags[0]"></image>
									</view>
								</view>
							</view>
							<view class="panel-item panel-item-ver">
								<view class="panel-item-header">视频：<text v-if="item.videos.length == 0">无</text></view>
								<view class="panel-item-body" v-if="item.videos.length > 0">
									<view class="video-box" v-for="(video, index) in item.videos" :key="index">
										<video class="video" :src="video"></video>
									</view>
								</view>
							</view>
							<block v-if="item.scene07 == '1'">
								<view class="panel-item">
									<text class="panel-item-header">其他紧急状况：</text>
									<text class="panel-item-body">{{ item.scene07Remark }}</text>
								</view>
								<view class="panel-item panel-item-ver">
									<view class="panel-item-header">照片：</view>
									<view class="panel-item-body" v-if="item.other_small_imags.length > 0">
										<view class="pic-box" @tap="viewPic(item.other_big_imags)">
											<image class="pic" mode="aspectFit" :src="item.other_small_imags[0]"></image>
										</view>
									</view>
								</view>
								<view class="panel-item panel-item-ver">
									<view class="panel-item-header">视频：</view>
									<view class="panel-item-body">
										<view class="video-box" v-for="(otherVideo, index) in item.otherVideos" :key="index">
											<video class="video" :src="otherVideo"></video>
										</view>
									</view>
								</view>
							</block>
							<block v-else>
								<view class="panel-item">
									<text class="panel-item-header">其他紧急状况：</text>
									<text class="panel-item-body">无紧急情况</text>
								</view>
								<view class="panel-item">
									<text class="panel-item-header">图片：</text>
									<text class="panel-item-body">无</text>
								</view>
								<view class="panel-item">
									<text class="panel-item-header">视频：</text>
									<text class="panel-item-body">无</text>
								</view>
							</block>
							<view class="panel-item">
								<text class="panel-item-header">上报人：</text>
								<text class="panel-item-body">{{ item.createUserName }}({{ item.createUserRole }})</text>
							</view>
							<view class="panel-item">
								<text class="panel-item-header">电话：</text>
								<text class="panel-item-body">{{ item.createUserPhone }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { queryTaskDetail } from '@/api/configure.js';
	import {deepClone,mergeUrls,getUserInfo,formatDateStr, previewImage} from '@/util/util.js';
	import configUrl from '@/util/url.js';
	export default {
		data() {
			return {
				jsdId: '',
				businessId: '',
				name: '',
				address: '',
				list: []
			}
		},
		methods: {
			init() {
				this.getData();
			},
			getData() {
				let data = {
					jsdId: this.jsdId,
					businessId: this.businessId,
					jsdType: this.jsdType
				}

				queryTaskDetail(data).then((res) => {
					let list = res.data.slice(0);
					
					this.list = list.map((item) => {
						item.imags = [];
						
						item.imags = item.szbmJsdBusinessMiddlePatrolFileList.reduce((prev, cur)=> {
							if(cur.type == 'img' && cur.sceneCode != '06'){
								let url = configUrl.CASEIMAGE_URL + cur.path.substr(1);
								
								prev.push(url);
							}
							
							return prev;
						}, [])
						
						item.big_imags = [];
						item.small_imags = [];
						
						item.imags.forEach( image => {
							if(image.indexOf('/original/') !== -1){
								item.big_imags.push(image);
							} else {
								item.small_imags.push(image);
							}
						})
						
						item.otherImags = item.szbmJsdBusinessMiddlePatrolFileList.reduce((prev, cur)=> {
							if(cur.type == 'img' && cur.sceneCode == '06'){
								let url = configUrl.CASEIMAGE_URL + cur.path.substr(1);
								
								prev.push(url);
							}
							
							return prev;
						}, [])
						
						item.other_big_imags = [];
						item.other_small_imags = [];
						
						item.otherImags.forEach( image => {
							if(image.indexOf('/original/') !== -1){
								item.other_big_imags.push(image);
							} else {
								item.other_small_imags.push(image);
							}
						})
						
						item.videos = item.szbmJsdBusinessMiddlePatrolFileList.reduce((prev, cur)=> {
							if(cur.type == 'video' && cur.sceneCode != '06'){
								let url = configUrl.CASEIMAGE_URL + cur.path.substr(1);
								
								prev.push(url);
							}
							return prev;
						}, [])
						
						item.otherVideos = item.szbmJsdBusinessMiddlePatrolFileList.reduce((prev, cur)=> {
							if(cur.type == 'video' && cur.sceneCode == '06'){
								let url = configUrl.CASEIMAGE_URL + cur.path.substr(1);
								
								prev.push(url);
							}
							return prev;
						}, [])
						
						return item;
					})
				})
			},
			viewPic(urls) {
				previewImage({
					urls: urls
				})
			}
		},
		onLoad(option) {
			this.jsdId = option.jsdId;
			this.businessId = option.businessId;
			this.name = option.name;
			this.address = option.address;
			this.jsdType = option.jsdType;
			
			this.init();
		}
	}
</script>

<style lang="scss">
	.form {}

	.form-a {
		margin-top: 20rpx;
		color: #767676;

		.form-group {
			.form-item {
				padding: 6rpx 0rpx;
				margin-bottom: 8rpx;
				display: flex;

				.form-item-header {
					font-size: 28rpx;
					line-height: 120%;
				}

				.form-item-body {
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 120%;
				}

				&.form-item-ver {
					flex-direction: column;

					.form-item-header {
						width: 100%;
						margin-bottom: 10rpx;
					}

					.form-item-body {
						width: 100%;
						.form-control-static{
							min-height: 100rpx;
							padding: 20rpx;
							border-radius: 10rpx;
							line-height: 120%;
							background-color: #ececec;
						}
					}
				}
			}

			.text-alert {
				color: #dd524d;
			}
		}
	}
	
	.step{}
	.step-a{
		background-color: #ececec;
		.step-group{
			padding: 40rpx 0rpx;
			.step-item{
				padding: 0rpx 40rpx 40rpx 90rpx;
				position: relative;
				top: 0rpx;
				left: 0rpx;
				.step-item-line{
					width: 4rpx;
					position: absolute;
					top: 0rpx;
					left: 50rpx;
					bottom: 0rpx;
					background-color: #f29004;
					.step-item-check{
						position: absolute;
						top: 20rpx;
						left: 50%;
						width: 32rpx;
						height: 30rpx;
						margin-left: -16rpx;
						border-radius: 50%;
						background-color: #f29004;
					}
				}
				&.begin{
					.step-item-line{
						top: 20rpx;
						.step-item-check{
							top: 0rpx;
						}
					}
				}
				&.end{
					padding-bottom: 0rpx;
				}
			}
		}
	}
	
	.panel{
		position: relative;
		top: 0rpx;
		left: 0rpx;
		.panel-angle{
			width: 0;
			height: 0;
			border-right: 16rpx solid #f29004;
			border-top: 16rpx solid transparent;
			border-bottom: 16rpx solid transparent;
			border-left: 16rpx solid transparent;
			position: absolute;
			top: 20rpx;
			left: -32rpx;
		}
		.panel-header{
			padding: 20rpx;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			background-color: #f29004;
			.panel-item-top{
				margin-bottom: 10rpx;
				font-size: 32rpx;
				line-height: 120%;
				color: #ffffff;
			}
			.panel-item-bot{
				font-size: 28rpx;
				line-height: 120%;
				color: #ffffff;
			}
		}
		.panel-body{
			padding: 10rpx 20rpx 30rpx;
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			background-color: #ffffff;
			.panel-item{
				margin-bottom: 10rpx;
				font-size: 24rpx;
				line-height: 120%;
				color: #767676;
				&.panel-item-ver{
					.panel-item-header{
						margin-bottom: 10rpx;
					}
				}
			}
			.panel-item-pic{
				height: 400rpx;
				.pic{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	
	.pic-box{
		height: 200rpx;
		.pic{
			width: 100%;
			height: 100%;
		}
	}
	.video-box{
		height: 200rpx;
		margin-bottom: 20rpx;
		.video{
			width: 100%;
			height: 100%;
		}
	}
</style>
